<!--
 * @Author: Aaron
 * @Date: 2022-01-10 11:18:04
 * @LastEditors: Aaron
 * @LastEditTime: 2022-03-25 16:20:00
 * @Description: file content
 * @FilePath: \ias_ui\src\views\coi\spuManagement\components\searchHead.vue
 * @Company: 沃尔玛
-->
<template>
  <div class="app-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="1">
        <template slot="title"> <i class="el-icon-search" />&nbsp;搜索栏 </template>
        <div class="head-container">
          <el-form class="searchform" :inline="true" size="mini" label-width="auto">
            <el-form-item label="SPU名称">
              <el-input v-model.trim="searchData.spuName" placeholder="请输入SPU名称" clearable style="width: 200px;" />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="searchData.mainStatus" style="width: 200px;" placeholder="请选择状态" collapse-tags clearable>
                <el-option v-for="item in spuStatus" :key="item.mainStatus" :label="item.mainDescribe" :value="item.mainStatus" />
              </el-select>
            </el-form-item>
            <el-form-item label="UPC(不含检验码)">
              <el-input v-model="searchData.skuList" type="textarea" placeholder="请输入SKU的UPC，多个回车换行隔开" clearable style="width: 200px;" />
            </el-form-item>
            <el-form-item label="">
              <el-button id="searchBtn" size="mini" type="primary" icon="el-icon-search" round @click="$emit('search')">查询</el-button>
              <el-button id="resetBtn" size="mini" type="primary" icon="el-icon-refresh" round @click="$emit('reset')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { spuListStatus } from '@/api/coi/onlineTaskAPI/spu.js'

export default {
  name: 'SpuListSearchHead',
  props: {
    searchData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      spuStatus: [],
      activeName: '1'
    }
  },
  created() {
    this.getStatus()
  },
  methods: {
    async getStatus() {
      try {
        const { result } = await spuListStatus()
        if (!result) return
        this.spuStatus = result
        // eslint-disable-next-line no-empty
      } catch (error) {}
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding-bottom: 8px;
}
/deep/ .el-form-item {
  margin-right: 0;
}
</style>
